<template>
    <div class='card-member' v-bind:style="{width:width}">
        <div class='card-inner'>
            <div class='personTotal clearfix'>
                <div class='lf personInfo'>
                    <h4 class="brief" v-if="!keyEmployee" :title="personInfo.dept_descr">{{personInfo.dept_descr}}</h4>
                    <h3 class='name ellipsis' :title="personInfo.name">{{personInfo.name}}</h3>
                    <ul class="width-nochange">
                        <li class="ellipsis" :title="personInfo.position_desc"><strong>职位:</strong>&nbsp;{{personInfo.position_desc | handlePosition}}</li> 
                        <li class="ellipsis" :title="personInfo.birthdate"><i class="fa fa-birthday-cake" aria-hidden="true"></i>出生日期 : {{personInfo.birthdate && personInfo.birthdate.split(' ')[0]}}({{personInfo.birthdate | calculateAge}}岁)</li> 
                        <li class="ellipsis" :title="personInfo.highest_edu"><i class="fa fa-graduation-cap" ></i>最高学历 : {{personInfo.highest_edu ? personInfo.highest_edu : '&nbsp;'}}</li>
                        <li class="ellipsis" :title="personInfo.political_sta_chn"><i class="iconfont" ></i>政治面貌 : {{personInfo.political_sta_chn}}</li>
                        <li class="ellipsis" v-if="keyEmployee" :title="personInfo.sta_lvl_descr"><i class="iconfont" ></i>职级:{{personInfo.sta_lvl_descr | handlePosition}}</li>
                    </ul>
                </div>
                <div class='lf personImg'>
                    <img :src="srcImg" class='cardPhoto' alt="">
                </div>
            </div>
            <div class="btnArea">          
                <a class="btn btn-leaderInfo" target="_blank" :href="ComputedEmplid">
                    <i class="fa fa-file-pdf-o"></i> 履历表
                </a>
                <a class="btn btn-leaderSalary" @click="salaryDetail" data-modal="#modal1">
                    <i class="fa fa-jpy"></i> 薪酬信息
                </a>                            
            </div>
        </div>
        <el-dialog :title="title" size="small" :visible.sync="dialogTableVisible" :lock-scroll=false>
            <div>
                <h3>薪酬组成</h3>
                <el-table :data="gridData">
                    <el-table-column property="descr" label="薪酬项" width="150"></el-table-column>
                    <el-table-column property="comprate" label="金额" width="200"></el-table-column>
                    <el-table-column property="currency_CD" label="货币"></el-table-column>
                    <el-table-column property="frequency_DESCR" label="发薪频率"></el-table-column>
                </el-table>
            </div>
            <div class="salaryRecord">
                <h3>近半年发薪记录</h3>
                <el-table :data="gridData1" :fit='true'>
                    <el-table-column property="cal_PRD_ID" label="发薪期间" width="80"></el-table-column>
                    <el-table-column property="cal_ID" label="发薪类型" width="80"></el-table-column>
                    <el-table-column property="c_GROSS_AMT" label="收入合计	" width="80"></el-table-column>
                    <el-table-column property="c_DDCT_AMT" label="扣减合计" width="80"></el-table-column>
                    <el-table-column property="c_NET_PAY" label="实发工资"></el-table-column>
                    <el-table-column property="c_MPF" label="公司承担社保/MPF"></el-table-column>
                    <el-table-column property="c_LABORCOST" label="人工成本合计"></el-table-column>
                    <el-table-column property="currency_CD" label="货币代码"></el-table-column> 
                </el-table>
            </div>

        </el-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import { Table, TableColumn, Dialog } from 'element-ui'
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Dialog)
export default {
	data () {
		return {
			// wid:'33.333%'
			url: '#/resume',
			dialogTableVisible: false,
			gridData: [{
				// name:'',
				// value:'',
				// address:'CNY',
				// address1:'每月'
				// },{
				// name:'',
				// value:'',
				// address:'CNY',
				// address1:'每月'
				// },{
				// name:'',
				// value:'',
				// address:'CNY',
				// address1:'每月'
				// },{
				// name:'',
				// value:'',
				// address:'CNY',
				// address1:'每月'
				// },{
				// name:'',
				// value:'',
				// address:'CNY',
				// address1:'每月'
			},],
			gridData1: [],
			srcImg: null,
		}
	},
	components: {

	},
	created: function () {
		this.Axios.Post(this.URL.getEmployeeImg.url, {
			emplid: this.personInfo.emplid
		}).then(res => {
			this.srcImg = 'data:image/png;base64,' + res.data.message
		})
	},
	methods: {
		salaryDetail: function () {
			let self = this
			let para = {
				emplId: this.personInfo.emplid//获取当前点击名片的id
			}
			this.Axios.Post(this.URL.getSalaryByEmplid.url, para)
				.then(function (res) {
					self.gridData1 = res.data.datas

					self.payArray = []//近半年发薪记录
					for (let i = 0; i < res.data.datas.salarys.length; i++) {
						let str_id = res.data.datas.salarys[i].summary.cal_ID
						res.data.datas.salarys[i].summary.cal_ID = str_id.indexOf('PAY') > -1 ? ('正常发薪') : ('多次发薪')
						self.payArray.push(res.data.datas.salarys[i].summary)
						console.log(123, str_id)
					}
					self.gridData1 = self.payArray
					self.gridData = res.data.datas.salaryComprise//获取薪酬组成
					console.log(123, gridData1)
				})
			this.dialogTableVisible = true
		}
	},
	computed: {
		title: function () {

			return this.personInfo.name + '-薪酬信息'
		},
		ComputedEmplid: function () {
			return 'module/resume.html?emplid=' + this.personInfo.emplid
		},
		//          srcImg : function(){
		//              var ImgObj = new Image(); //判断图片是否存在  
		//              ImgObj.src = "http://10.5.0.137:8080/img/"+this.personInfo.emplid+".png";  
		//              //没有图片，则返回-1  
		//              if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
		//                  return "http://10.5.0.137:8080/img/"+this.personInfo.emplid+".png";  
		//              } else {  
		//                  return '/static/images/default1.jpg';
		//              }  
		//              
		//          },
		keyEmployee: function () {
			return this.type === 'key' ? true : false
		}
	},
	props: {
		width: {
			type: String,
			default: '33.333%'
		},
		personInfo: {
			type: Object,
			default: ''
		},
		type: {
			type: String,
			default: 'dept'
		}
	},
	filters: {
		calculateAge: function (value) {

			if (value) { value = value.split(' ')[0] } else { return '' }

			return new Date().getFullYear() - new Date(value).getFullYear()
		},
		handlePosition: function (value) {
			if (!value || !value.trim()) {
				return ''
			}
			if (value && value.indexOf('_') < 0) {
				return value
			}
			return value.split('_')[1]
		}

	},
	watch: {
		widt: function () {
			// console.log('watch',this.widt);
			// console.log(this.red,'tell me color');
		}
	}
}
</script>
<style scoped>
.card-member {
  min-height: 1px;
  float: left;
  color: #333;
  background-color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}
.card-inner {
  width: 100%;
  position: relative;
  margin: 10px auto;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/*个人信息区域样式 start*/
.card-member .personTotal {
  cursor: pointer;
  margin-bottom: 20px;
}
.card-member .personInfo {
  float: left;
  width: 69%;
  padding-left: 4%;
}
.iconfont {
  width: 20px;
  display: inline-block;
}
.card-member .name {
  font-size: 24px;
  margin-bottom: 10px;
  margin-top: 15px;
  font-weight: 500;
  line-height: 1.1;
}
.card-member .brief {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 300;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-member .width-nochange {
  /*max-width: 237px;*/
  min-width: 223px;
  font-size: 14px;
}

.card-member li {
  line-height: 25px;
  color: #333;
}
.card-member li .fa {
  width: 20px;
}
.card-member .personImg {
  float: left;
  width: 31%;
  padding-left: 5px;
  padding-top: 25px;
}
.card-member .cardPhoto {
  /*margin-left:5px;*/
  width: 100px;
  height: 139px;
  border-radius: 50%;
  max-width: 100%;
  vertical-align: middle;
}
/*个人信息区域样式 end*/

/*按钮区域样式 start*/
.card-member .btnArea {
  background: #f2f5f7;
  padding: 12px 0;
  border-top: 1px solid #e6e9ed;
  text-align: center;
  font-size: 12px;
  height: 44px;
}
.card-member .btn {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
}
.card-member .btnArea .btn-leaderInfo {
  color: #fff;
  background-color: #3c8dbc;
  border-color: #204d74;
}
.card-member .btnArea .btn-leaderInfo:hover {
  background-color: #367fa9;
  /*background-color: #00c0ef;*/
  cursor: pointer;
}
.card-member .btnArea .btn-leaderSalary {
  color: #fff;
  margin-left: 8px;
  background-color: #00c0ef;
  border-color: #00acd6;
}
.card-member .btnArea .btn-leaderSalary:hover {
  background-color: #00acd6;
  cursor: pointer;
}
/*按钮区域样式 end*/
</style>

<style>
.card-member .el-dialog--small {
  width: 63%;
}
.card-member .el-dialog {
  position: relative;
  left: 0;
  transform: translateX(30%);
  -ms-transform: translateX(30%);
}
.card-member .el-dialog__header {
  width: 98%;
}
.card-member .el-table .gutter {
  display: none;
}
.card-member .salaryRecord {
  margin-top: 20px;
}
.card-member .el-dialog__body {
  cursor: pointer;
}
</style>




